-
Survol nom
Survolez les noms en rouge.Père et fils: Tu seras un pin, mon fils !
Parabole Que recevez-vous avec ?
Lanterne à lumière bleue.
Nuage timide.
Fourmillière désertée
Code.
<div style="height: 500px;">
<p id="fd"><br /><br />Survolez les noms en rouge.</p>
<p id="art1"><span id="l1" style="color: red;">Père</span><span id="m1"> </span> et fils: Tu seras un pin, mon fils !</p>
<p id="art2"><span id="l2" style="color: red;">Parabole</span><span id="m2"> </span> Que recevez-vous avec ?</p>
<p id="art3"><span id="l3" style="color: red;">Lanterne</span><span id="m3"> </span> à lumière bleue.</p>
<p id="art4"><span id="l4" style="color: red;">Nuage</span><span id="m4"> </span> timide.</p>
<p id="art5"><span id="l5" style="color: red;">Fourmillière</span><span id="m5"> </span> désertée</p>
</div>
<style><!--
#fd{ position:absolute; transform:translate(0px,0px);float:left; width:800px; height:450px; border:4px ridge white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/bg165.jpg'); border-radius:30%; text-align:center; font-size:26pt; color:lime; text-shadow:1px 1px black;}
#art1{position:absolute; transform:translate(820px,0px); width:350px; height:40px; font-size:12pt;}
#art2{position:absolute; transform:translate(820px,60px); width:350px; height:40px; font-size:12pt;}
#art3{position:absolute; transform:translate(820px,120px); width:350px; height:40px; font-size:12pt;}
#art4{position:absolute; transform:translate(820px,180px); width:350px; height:40px; font-size:12pt;}
#art5{position:absolute; transform:translate(820px,240px); width:350px; height:40px; font-size:12pt;}
#m1{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-852px,4px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5574.JPG'); opacity:0;}
#m2{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-886px,-56px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5553.JPG'); opacity:0;}
#m3{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-888px,-116px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5557.JPG'); opacity:0;}
#m4{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-868px,-176px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5570.JPG'); opacity:0;}
#m5{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-910px,-236px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5575.JPG'); opacity:0;}
#l1:hover ~ #m1{ opacity:1;}
#l2:hover ~ #m2{ opacity:1;}
#l3:hover ~ #m3{ opacity:1;}
#l4:hover ~ #m4{ opacity:1;}
#l5:hover ~ #m5{ opacity:1;}
--></style>
...
Je ne vous cache pas avoir eu quelques difficultés dans le positionnement des images, sans comprendre le principe et en "bricolant" !
J'ai préféré l'affichage par changement d'opacité à "display:none/block)".